<template>
	<view class="finds">
		<keep-alive>
		  <component :is="activeTab"></component>
		</keep-alive>

		<view class="find">
			<view class="label" v-if="show">
				<text @click="setActiveTab('recommend')">推荐</text>
				<text @click="setActiveTab('video')">视频</text>
				<text @click="setActiveTab('live')">直播</text>
				<text @click="setActiveTab('game')">游戏</text>
				<text @click="setActiveTab('wallpaper')">壁纸</text>
				<text @click="setActiveTab('anime')">动漫</text>
			</view>
			<view class="attention-content" v-for="(item, index) in notes" :key="item.postId">
				<view class="attention-content-img" @click="as(index)">
					<image :src="item.url" mode="aspectFit" v-if="item.mediaType == 'image'" @click="as(index)"></image>
					<video :src="item.url" :controls="false" :show-center-play-btn="false" v-else
						@click="as(index)"></video>
				</view>
				<text class="attention-content-text" @click="as(index)">{{ item.content }}</text>
				<view class="attention-content-user">
					<view class="attention-content-user-img">
						<image :src="item.profilePrcture" mode="aspectFit" class="attention-content-user-img-image">
						</image>
						<text class="attention-content-user-text">{{ item.username }}</text>
					</view>
					<view class="attention-content-user-line" @click="discolor(index)" ref="redT">
						<image src="@/static/TestImg/img/indexImg/love.png" mode="aspectFit"
							class="attention-content-user-img-image" v-if="item.like"></image>
						<image src="@/static/TestImg/img/message/aixin.png" mode="aspectFit"
							class="attention-content-user-img-image" v-else></image>
						<text>{{ item.likeNum }}</text>
					</view>
				</view>
			</view>
			<view class="perch" v-if="perch">

			</view>
		</view>
		<u-loadmore :status="status" />
	</view>
</template>

<script>

export default {
	
	data() {
		return {
			activeTab: 'recommend', // 默认显示的标签
			lastScrollTop: 0,
			show: true,
			notes: [],
			page: 1,
			size: 20,
			status: "loading",
			perch:false

		};
	},
	created() {
		this.status = "loading"
		this.seleteIndex();

	},
	props: ["findCon", "ffive"],
	watch: {
	  findCon: {
	    handler(newVal, oldVal) {
	      if (newVal !== oldVal) {
	        this.page = newVal;
	        this.seleteIndex();
	      }
	    },
	  },
	  ffive: {
	    handler(newVal, oldVal) {
	      if (newVal !== oldVal) {
	        console.log(newVal);
	        this.notes = [];
	        this.page = 1;
	        this.status = "loading";
	        this.seleteIndex();
	      }
	    }
	  }
	}
	,
	methods: {
		setActiveTab(tab) {
			this.activeTab = tab;
			this.diaoyu(tab)
		},
		discolor(e) {
			console.log(this.notes[e].like);
			this.notes[e].like = !this.notes[e].like;
			// this.nates[e].NoSelected = !this.nates[e].NoSelected;
			if (this.notes[e].like == true) {
				this.request(`/like/goLike?postId=${this.notes[e].postId}&userId=${uni.getStorageSync("id")}`, "post")
					.then((res) => {
						console.log(res);
						this.notes[e].likeNum++;
					}).catch((err) => {
						console.log(err);
					});
			} else if (this.notes[e].like == false) {
				this.request(`/like/delLike?postId=${this.notes[e].postId}&userId=${uni.getStorageSync("id")}`,
					"delete")
					.then((res) => {
						console.log(res);
						this.notes[e].likeNum--;
					}).catch((err) => {
						console.log(err);
					})
			}

		},
		as(e) {
			this.addhistory(e);
			uni.navigateTo({
				url: `/pages/index/viewAsText/viewAsText?postId=${this.notes[e].postId}&mediaType=${this.notes[e].mediaType}&followeeId=${this.notes[e].userId}`
			});
		
		},
		onPageScroll(e) {
			console.log(e);
			const currentScrollTop = e.scrollTop;
			if (currentScrollTop < this.lastScrollTop) {
				this.show = false;
			}
			this.lastScrollTop = currentScrollTop;
		},
		//添加历史记录
		addhistory(index){
			this.request(`/api/history/insertHistory?userId=${uni.getStorageSync("id")}
			&postId=${this.notes[index].postId}`,"post").then( res =>{
				if(res.code == 200){
					console.log(res);
				}
			}).catch(err => {
				console.log(err);
			})
		},
		 seleteIndex() {
		    if (this.status == "nomore" || this.loading) {
		      return;
		    }
		    this.loading = true; // 设置加载中标志
		    this.request(`/getHomePage?page=${this.page}&size=${this.size}&userId=${uni.getStorageSync('id')}`, "post")
		      .then((res) => {
		        this.loading = false; // 请求完成后取消加载中标志
		        if (res.data.code == 401) {
		          uni.navigateTo({
		            url: "/pages/login/login"
		          });
		        }
		        if (res.data.code == 500) {
		          this.status = "nomore";
		          this.$emit("noAdd", this.status);
		        } else {
		          this.notes.push.apply(this.notes, res.data.result.list);
		          if (this.notes.length % 2 != 0) {
		            this.perch = true;
		          }
		        }
		      }).catch((err) => {
		        this.loading = false; // 请求失败后取消加载中标志
		        uni.showToast({
		          title: "网络未连接",
		          icon: "error"
		        });
		        uni.navigateTo({
		          url: "/pages/login/login"
		        });
		      });
		  }
	}
}
</script>

<style scoped>
.find {
	width: 750rpx;
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
}

.label {
	width: 100%;
	height: 60rpx;
	margin-top: 100rpx;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}

.perch {
	width: 370rpx;
	height: 600rpx;
}

.attention-content {
	margin-top: 10rpx;
	margin-bottom: 10rpx;
	width: 370rpx;
	height: 600rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border-radius: 16rpx;
}

.attention-content-img {
	width: 100%;
	height: 470rpx;
	display: flex;
	align-items: center;

}

.attention-content-img image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.attention-content-text {
	font-size: 35rpx;
	font-family: "微软雅黑";
	display: block;
	padding: 15rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
	
.attention-content-user {
	margin-left: 16rpx;
	margin-top: 15rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.attention-content-user-img {

	display: flex;
	justify-content: space-evenly;
}

.attention-content-user-img-image {
	border-radius: 50%;
	width: 45rpx;
	height: 45rpx;
	object-fit: cover;
	object-position: center;
}

.attention-content-user-line {
	display: flex;
	align-items: center;
}
</style>